import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';

import './index.less';
export default function ChartLine(props) {
  const { v } = props;
  const chartRef = useRef(null);
  const [myChart, setMyChart] = useState(null);
  const [echartsInterval, setEchartsInterval] = useState(null);

  useEffect(() => {
    renderChart();
  }, []);

  useEffect(() => {
    activeEcharts(-1);
  }, [myChart]);

  const renderChart = () => {
    const option = getChartOption();
    let chartInstance = null;
    const chart = echarts.getInstanceByDom(chartRef.current);
    if (chart) {
      chartInstance = chart;
    } else {
      chartInstance = echarts.init(chartRef.current, 'dark');
    }
    setMyChart(chartInstance);
    chartInstance.setOption(option);
  };

  const activeEcharts = (currentIndex) => {
    // 数据长度
    let dataLength = 10;
    // 清空tooltip定时器
    clearTimeout(echartsInterval);
    // 加载tooltip定时器
    const interval = setTimeout(() => {
      // 获取当前显示第几个数据，从0 开始。（取 显示次数除以数据长度的余数）
      currentIndex = (currentIndex + 1) % dataLength;
      // echarts的触发图表行为
      myChart.dispatchAction({
        type: 'showTip', // 触发的行为
        seriesIndex: 0, // 触发的数据对应的坐标系（通常只有一个y轴，取0）
        dataIndex: currentIndex, // 第几个数据显示toolTip
      });
      activeEcharts(currentIndex);
    }, 2000);
    setEchartsInterval(interval);
  };

  const getChartOption = (p) => {
    // 数据
    const optionList = v;

    const width14 = (screen.width * 14) / 1920;
    const width18 = (screen.width * 18) / 1920;
    const width40 = (screen.width * 40) / 1920;
    const fontSize14 = (screen.width * 12) / 1920;
    const height4 = (screen.height * 4) / 1080;
  
    const wid = width18;
    const w1 = Math.sin(Math.PI / 6) * wid; //4
    const w2 = Math.sin(Math.PI / 3) * wid; // 6.8
    const snapHeight = wid / 2;
    const CubeLeft = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
      },
      buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c0 = [shape.x, shape.y];
        const c1 = [shape.x - w2, shape.y];
        const c2 = [shape.x - w2, xAxisPoint[1]];
        const c3 = [shape.x, xAxisPoint[1]];
        ctx
          .moveTo(c0[0], c0[1])
          .lineTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .closePath();
      },
    });
    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
      shape: { x: 0, y: 0 },
      buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x, shape.y];
        const c2 = [shape.x, xAxisPoint[1]];
        const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight];
        const c4 = [shape.x + w1, shape.y - w2 + snapHeight];
        ctx
          .moveTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .lineTo(c4[0], c4[1])
          .closePath();
      },
    });
    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
      shape: { x: 0, y: 0 },
      buildPath: function (ctx, shape) {
        //
        const c1 = [shape.x, shape.y];
        const c2 = [shape.x + w1, shape.y - w2 + snapHeight]; //右点
        const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight];
        const c4 = [shape.x - w2, shape.y];
        ctx
          .moveTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .lineTo(c4[0], c4[1])
          .closePath();
      },
    });

    // 注册三个面图形
    echarts.graphic.registerShape('CubeLeft', CubeLeft);
    echarts.graphic.registerShape('CubeRight', CubeRight);
    echarts.graphic.registerShape('CubeTop', CubeTop);

    const option = {
      backgroundColor: 'transparent',
      color: ['#61D8FF', '#61FF79'],
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgb(0, 33, 82)',
        textStyle: {
          fontSize: fontSize14,
          color: 'white',
        },
        borderColor: '#4da0f8d6',
      },
      legend: {
        show: false,
        icon: 'rect',
        itemWidth: width18,
        itemHeight: height4,
        itemGap: width40,
        textStyle: {
          fontSize: fontSize14,
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(179, 223, 255, 1)', //x轴颜色
          },
        },
        axisLabel: {
          fontSize: fontSize14,
          color: 'rgba(187, 224, 248, 1)',
        },
        data: optionList.dataX,
      },
      yAxis: {
        type: 'value',
        // name: '单位：头',
        // nameTextStyle: {
        //   fontSize: fontSize14,
        //   color: 'rgba(187, 224, 248, 1)',
        // },
        axisLine: {
          show: false,
          lineStyle: {
            color: 'rgba(59, 78, 103, 1)',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(59, 78, 103, 1)',
          },
        },
        axisLabel: {
          fontSize: fontSize14,
          color: 'rgba(187, 224, 248, 1)',
        },
      },

      series: [
        {
          type: 'custom',
          renderItem: (params, api) => {
            let cubeLeftStyle = '';
            let cubeRightStyle = '';
            let cubeTopStyle = '';

            cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(36, 167, 214, 1)',
              },
              {
                offset: 1,
                color: 'rgba(0,148,109,0)',
              },
            ]);
            cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(108, 238, 255, 0.3)',
              },
              {
                offset: 1,
                color: 'rgba(0,148,109,0)',
              },
            ]);
            cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(128, 244, 255, 1)',
              },
              {
                offset: 1,
                color: 'rgba(128, 244, 255, 1)',
              },
            ]);

            // if (params.dataIndex == 0) {
            //   cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(0,255,186,1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(0,148,109,1)',
            //     },
            //   ]);
            //   cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(0,255,186,0.3)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(0,148,109,0.3)',
            //     },
            //   ]);
            //   cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(189,255,237,1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(189,255,237,1)',
            //     },
            //   ]);
            // } else if (params.dataIndex == 1) {
            //   cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(222,231,235,1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(141,153,165,1)',
            //     },
            //   ]);
            //   cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(222,231,235,0.3)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(222,231,235,0.3)',
            //     },
            //   ]);
            //   cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(255,255,255,1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(255,255,2555,1)',
            //     },
            //   ]);
            // } else if (params.dataIndex == 2) {
            //   cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(62,255,255,1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(0,126,191,1)',
            //     },
            //   ]);
            //   cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(23,176,255,1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(0,138,255,0.3)',
            //     },
            //   ]);
            //   cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(163,232,255,1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(163,232,255,1)',
            //     },
            //   ]);
            // } else if (params.dataIndex == 3) {
            //   cubeLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(255,217,217,1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(180,97,97,1)',
            //     },
            //   ]);
            //   cubeRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(178,95,95,0.3)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(89,47,47,0.3)',
            //     },
            //   ]);
            //   cubeTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(255,217,217,1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(255,217,217,1)',
            //     },
            //   ]);
            // }

            const location = api.coord([api.value(0), api.value(1)]);
            return {
              type: 'group',
              children: [
                {
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: cubeLeftStyle,
                  },
                },
                {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: cubeRightStyle,
                  },
                },
                {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0]),
                  },
                  style: {
                    fill: cubeTopStyle,
                  },
                },
              ],
            };
          },
          data: optionList.value,
        },
        {
          type: 'bar',
          label: {
            normal: {
              show: false,
              position: 'top',
              fontSize: width14,
              color: '#fff',
              offset: [2, -18],
            },
          },
          itemStyle: {
            color: 'transparent',
          },
          tooltip: {
            show: false,
          },
          data: optionList.value,
        },
      ],
    };
    return option;
  };

  return <div className="line_chart" ref={chartRef}></div>;
}
